<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="layui/common/commonHead :: commonHead(~{::title},~{::link},~{})">
    <title>新增文章 ADD</title>
    <link rel="stylesheet" th:href="@{/layuiadmin/modules/common/eleTree/eleTree.css}"  media="all">

</head>
<body>

<div class="layui-form"  lay-filter="cms_article_add_form" id="cms_article_add_form" style="padding: 20px 0 0 0;">

    <div class="layui-form-item">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-inline">
            <input type="text" name="basicTitle" lay-verify="required" placeholder="请输入文章标题(必填)" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label ">文章作者</label>
        <div class="layui-input-inline">
            <input type="text" name="articleAuthor"   placeholder="请输入文章作者" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章来源</label>
        <div class="layui-input-inline">
            <input type="text" name="articleSource"   placeholder="请输入文章来源" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-label">文章类型</label>
        <div class="layui-input-inline">
            <input type="text" name="articleType"   placeholder="请输入文章来源" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">应用名称</label>
        <div class="layui-input-inline">
            <div id="appName"></div>
        </div>
        <label class="layui-form-label">所属栏目</label>
        <div class="layui-input-inline">
            <div id="parentCategoryId"></div>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">文章状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status"  lay-skin="switch" lay-text="正常|锁定"  lay-filter="" checked>
        </div>
    </div>



    <div class="layui-form-item">
        <label class="layui-form-label">文章内容</label>
        <div class="" style="width: 90%;margin-left: 5%;">
            <textarea name="articleContent" id="categoryDescription" cols="50"  rows="10" placeholder="请输入栏目描述" autocomplete="off"></textarea>
        </div>
    </div>

    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="cms_article_add_form_submit" id="cms_article_add_form_submit" value="确认添加">
    </div>
</div>

<div th:replace="layui/common/commonJs :: commonJs(~{})">
</div>
<script>
    layui.use(['index', 'form', 'upload','xmSelect','tree','myTinyMce','eleTree'], function(){
        var $ = layui.$
            ,form = layui.form
            ,xmSelect = layui.xmSelect
            ,tree = layui.tree
            ,myTinyMce = layui.myTinyMce
            ,eleTree = layui.eleTree;

        var tinyContent = myTinyMce.render({
            elem: '#categoryDescription',
            height:600,
            width:'95%'
        })

        var xmData = layui.data("sso_admin_app").xmSelectData;
        var initValue = [];
        if(xmData && xmData.length > 0){
            initValue.push(xmData[0].value);
            intoSelect(xmData[0].value);
        }
        xmSelect.render({
            el: '#appName',
            name:'basicAppId',
            tips: '选择你要查找的应用',
            searchTips: '输入你要查找的应用',
            empty: '呀, 没有数据呢',
            filterable: false,
            clickClose: true,
            radio: true,
            initValue: initValue,
            model: {
                icon: 'hidden',
            },
            theme: {
                color: '#9c26b0',
            },
            data: xmData,
            on({ arr, change, isAdd }){
                var isExist = arr && arr.length > 0;
                var value;
                if(isExist){
                    value = arr[0].value;
                }
                intoSelect(value);
            }
        });

        function intoSelect(appId){
            var param = {};
            if(appId != null){
                param.appId = appId;
            }
            $.get("/sso/admin/cms/category/currentCategory",param, function (res) {
                if (res.code == '00000') {
                    $("#selectTree").show();
                    var parentCategory = xmSelect.render({
                        el: '#parentCategoryId',
                        name: 'basicCategoryId',
                        tips: '请选择栏目',
                        content: '<div id="selectTree" lay-filter="selectTree"></div>',
                        theme: {
                            color: '#9c26b0',
                        }
                    });

                    var selectTreeData = [];
                    var treeData = build(res.data,'0');
                    selectTreeData.push.apply(selectTreeData,treeData);

                    var selectTree = eleTree.render({
                        elem: '#selectTree'
                        ,data: selectTreeData
                        ,defaultExpandAll:true  //是否开启连接线
                        ,expandOnClickNode: false
                    });
                    eleTree.on("nodeClick(selectTree)", function(d) {
                        var arr = [];
                        var json = {};
                        json.label = d.data.currentData.label;
                        json.id = d.data.currentData.id;
                        arr.push(json);
                        parentCategory.update({
                            prop: {
                                name: 'label',
                                value: 'id',
                            },
                            data: arr,
                        }).setValue(arr)
                        parentCategory.closed();
                    });
                }
            });
        }



        function build(objData,id){
            var arrData = [];
            for(var t in objData){
                var json = {};
                if(objData[t].categoryParentId == id){
                    json.id = objData[t].categoryId;
                    json.label = objData[t].categoryTitle;
                    json.children = build(objData,objData[t].categoryId);
                    arrData.push(json);
                }
            }
            return arrData;
        }



        //监听锁定操作
        form.on('submit(cms_article_add_form_submit)', function(data){
            var field = data.field;
            field.articleContent = tinyContent.getContent();
            if(data.field.status){
                data.field.status = 1
            }else{
                data.field.stats = 2
            }
            //提交 Ajax 成功后，静态更新表格中的数据
            $.post('/sso/admin/cms/article/insert', field, function (data, status) {
                if (data.code == '00000') {
                    parent.layer.msg("新增成功");
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.layui.table.reload("cms-article-manage");
                    parent.layui.treeGrid.reload("cms-article-manage");
                } else {
                    parent.layer.msg("添加失败请重试");
                }
            })
        });
    });
    function layerClose() {
        layui.use(['layer' ], function() {
            var layer = layui.layer;
            var index=parent.layer.getFrameIndex(window.name);//获取当前弹出层的层级
            parent.layer.close(index);//关闭弹出层
        })
    }
</script>
</body>
</html>